﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="pages/admin/commons/header :: header"></div>
<body>
<div class="wap-container">
    <nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
        首页
        <span class="c-gray en">/</span>
        资讯管理
        <span class="c-gray en">/</span>
        资讯列表
        <a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="Hui-admin-content clearfix">
        <div class="panel">
            <div class="panel-body">
                <div class="row clearfix">
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <div class="row clearfix mb-10">
                            <span class="col-xs-4 form-item-label">选择分类：</span>
                            <span class="col-xs-8 form-item-control">
									<span class="select-box">
										<select id="classifyID" name="" class="select">
											<option value="0">全部分类</option>
											<option value="1">分类一</option>
											<option value="2">分类二</option>
										</select>
									</span>
								</span>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <div class="row clearfix mb-10">
                            <span class="col-xs-4 form-item-label">开始日期：</span>
                            <span class="col-xs-8 form-item-control">
									<input type="text" id="search-datetime-start"
                                           class="input-text datetimepicker-input">
								</span>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <div class="row clearfix mb-10">
                            <span class="col-xs-4 form-item-label">结束日期：</span>
                            <span class="col-xs-8 form-item-control">
									<input type="text" id="search-datetime-end" class="input-text datetimepicker-input">
								</span>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <div class="row clearfix mb-10">
                            <span class="col-xs-4 form-item-label">标题名称：</span>
                            <span class="col-xs-8 form-item-control">
									<input type="text" name="searchInput" id="search-input" placeholder=" 资讯名称"
                                           class="input-text"/>
								</span>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <div class="row clearfix">
								<span class="col-xs-4 form-item-control">
									<button name="" id="search-submit" class="btn btn-success radius" type="submit"><i
                                            class="Hui-iconfont">&#xe665;</i> 搜资讯</button>
								</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel mt-20">
            <div class="panel-body">
                <div class="clearfix">
						<span class="f-l">
						<a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i
                                class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
						</span>
                    <span class="f-r">共有数据：<strong>54</strong> 条</span>
                </div>
                <div class="mt-20 clearfix">
                    <table id="data-table-list"
                           class="table table-border table-bordered table-bg table-hover table-sort">
                        <thead>
                        <tr class="text-c">
                            <th width="25"><input type="checkbox" name="" value=""></th>
                            <th width="80">ID</th>
                            <th>标题</th>
                            <th width="80">分类</th>
                            <th width="80">来源</th>
                            <th width="120">更新时间</th>
                            <th width="75">浏览次数</th>
                            <th width="60">发布状态</th>
                            <th width="120">操作</th>
                        </tr>
                        </thead>
                        <tbody class="getData-list" data-currPage='1'>
                        <tr class="text-c">
                            <td><input type="checkbox" value="" name=""></td>
                            <td>10001</td>
                            <td class="text-l"><u style="cursor:pointer" class="text-primary"
                                                  onClick="article_edit('查看','article-add.html','10001')" title="查看">资讯标题</u>
                            </td>
                            <td>行业动态</td>
                            <td>H-ui</td>
                            <td>2014-6-11 11:11:42</td>
                            <td>21212</td>
                            <td class="td-status"><span class="label label-success radius">已发布</span></td>
                            <td class="f-14 td-manage"><a style="text-decoration:none"
                                                          onClick="article_stop(this,'10001')" href="javascript:;"
                                                          title="下架">下架</a>
                                <a style="text-decoration:none" class="ml-5"
                                   onClick="article_edit('资讯编辑','article-add.html','10001')" href="javascript:;"
                                   title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>
                                <a style="text-decoration:none" class="ml-5" onClick="article_del(this,'10001')"
                                   href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>
                            </td>
                        </tr>
                        <tr class="text-c">
                            <td><input type="checkbox" value="" name=""></td>
                            <td>10002</td>
                            <td class="text-l"><u style="cursor:pointer" class="text-primary"
                                                  onClick="article_edit('查看','article-add.html','10002')" title="查看">资讯标题</u>
                            </td>
                            <td>行业动态</td>
                            <td>H-ui</td>
                            <td>2014-6-11 11:11:42</td>
                            <td>21212</td>
                            <td class="td-status"><span class="label label-success radius">草稿</span></td>
                            <td class="f-14 td-manage">
                                <a style="text-decoration:none" onClick="article_shenhe(this,'10001')"
                                   href="javascript:;" title="审核">审核</a>
                                <a style="text-decoration:none" class="ml-5"
                                   onClick="article_edit('资讯编辑','article-add.html','10001')" href="javascript:;"
                                   title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>
                                <a style="text-decoration:none" class="ml-5" onClick="article_del(this,'10001')"
                                   href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div id="laypage" class="text-c"></div>
            </div>
        </div>
    </article>
</div>
<div th:replace="pages/admin/commons/footer :: footer"></div>
<!--_footer 作为公共模版分离出去-->
<!--	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>-->
<!--	<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>-->
<!--	<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>-->
<!--	&lt;!&ndash;/_footer /作为公共模版分离出去&ndash;&gt;-->

<!--	&lt;!&ndash;请在下方写此页面业务相关的脚本&ndash;&gt;-->
<!--	<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>-->
<!--	<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>-->
<!--	<script type="text/javascript" src="static/business/js/main.js"></script>-->
<!--/请在上方写此页面业务相关的脚本-->
<script type="text/javascript">
    /* =====所有的列表页都可照搬这套模式====== */
    // 获取URL参数，初始化条件
    function getUrlParameter() {
        // parseQueryString() 方法 在main.js中 提取URL参数为对象
        var urlObj = parseQueryString(window.location.href);
        // console.log(urlObj);

        $("#classifyID").val(urlObj.classifyID);
        $(".getData-list").attr("data-currPage", urlObj.currPage)
        $("#search-datetime-start").val(urlObj.datetimeStart);
        $("#search-datetime-end").val(urlObj.datatimeEnd);
        $("#search-input").val(urlObj.keywords);
    }

    // 封装一个获取数据列表的方法，将条件封装到options对象中
    function getDataList(options) {
        console.log(options);
        $.ajax({
            url: 'article-list.html',// 跳转到 action, 换成自己的接口
            data: options,
            type: 'get',
            cache: false,
            dataType: 'json', // 不一定非要json，可以是html，后台封好结构后，直接扔前台
            success: function (respData) {
                /* 大概的数据结构
                    respData: {
                        result: ture, // 返回状态
                        msg: '',		// 返回信息
                        pagination: { // 翻页数据
                            currPage: 1,// 当前第几页
                            total: 100, //数据总数
                            pageSize: 10,  // 每页条数
                        },
                        datas: [    // 详细数据
                            {
                                id: '',  // id
                                title: '', // 标题
                                classify: [  // 分类 允许属于多个分类
                                    {
                                        id: '',				// 分类id
                                        name: '',     // 分类名称
                                    },
                                    ……
                                ],
                                source: { // 来源
                                    id: '', // 来源id
                                    name: '', // 来源名称
                                },
                                updateTime: '', // 更新时间
                                viewsNo: '', // 浏览次数
                                status: {  // 各种状态
                                    examine: '',  // 审核状态
                                    manage: {     // 管理状态
                                        canPublish: 0, // 能否发布
                                        canEdit: 0,  // 能否编辑
                                        canDel: 0,   // 能否删除
                                    }
                                }
                            },
                            ……
                        ],
                    }
                */
                if (respData.result) { // 请求正确 返回true, 也指200状态
                    var data = respData.datas; // 返回的数据
                    var htmlstr = '';
                    if (data.length > 0) {
                        // 只有获取的数据对象长度大于0，我们才做for循环处理。
                        for (var i = 0; i < data.length; i++) { // for循环将json数据拼接成html结构。 此处可以用模板引擎。
                            htmlstr +=
                                '<tr>' +
                                '<td><input type="checkbox" value="" name=""></td>' +
                                '<td>' + data[i].id + '</td>' +
                                '<td class="text-l"><u style="cursor:pointer" class="text-primary" onClick="article_edit(\'查看\',\'article-zhang.html\',\'+data[i].id+\')" title="查看">' + data[i].title + '</u></td>' +
                                '<td data-id="' + data[i].classify.id + '">' + data[i].classify.name + '</td>' +
                                '<td data-id="' + data[i].source.id + '">' + data[i].source.name + '</td>' +
                                '<td>' + data[i].updateTime + '</td>' +
                                '<td>' + data[i].viewsNo + '</td>';
                            // data[i].status.examine 审核状态(字符串) '0'为草稿，'1'为审核中，'2'通过，'3'为未通过，'4'为发布，'5'为下架
                            if (data[i].status.examine == '0') {
                                htmlstr += '<td class="td-status"><span class="label label-default radius">草稿</span></td>';
                            }
                            if (data[i].status.examine == '1') {
                                htmlstr += '<td class="td-status"><span class="label label-primary radius">审核中</span></td>';
                            }
                            if (data[i].status.examine == '2') {
                                htmlstr += '<td class="td-status"><span class="label label-primary radius">通过，待发布</span></td>';
                            }
                            if (data[i].status.examine == '3') {
                                htmlstr += '<td class="td-status"><span class="label label-danger radius">未通过</span></td>';
                            }
                            if (data[i].status.examine == '4') {
                                htmlstr += '<td class="td-status"><span class="label label-success radius">已发布</span></td>';
                            }
                            if (data[i].status.examine == '5') {
                                htmlstr += '<td class="td-status"><span class="label label-danger radius">已下架</span></td>';
                            }

                            htmlstr += '<td class="f-14 td-manage">';
                            // data[i].status.manage 管理状态集合（子对象为布尔值）  canPublish 能否发布  canEdit 能否编辑 canDel能否删除
                            if (data[i].status.examine == '4' && data[i].status.manage.canPublish) {
                                htmlstr += '<a style="text-decoration:none" onClick="article_stop(this,\'+ data[i].id +\')" href="javascript:;" title="下架">下架</a>';
                            }
                            if ((data[i].status.examine == '2' || data[i].status.examine == '5') && data[i].status.manage.canPublish) {
                                htmlstr += '<a style="text-decoration:none" onClick="article_start(this,\'+ data[i].id +\')" href="javascript:;" title="发布">发布</a>';
                            }
                            if (data[i].status.manage.canEdit) {
                                htmlstr += '<a style="text-decoration:none" class="ml-5" onClick="article_edit(\'资讯编辑\',\'article-add.html\',\'+ data[i].id +\')" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>';
                            }
                            if (data[i].status.manage.canDel) {
                                htmlstr += '<a style="text-decoration:none" class="ml-5" onClick="article_del(this,\'+ data[i].id +\')" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>';
                            }
                            htmlstr += '</td>' +
                                '</tr>';
                        }
                        // 在页面对应<tbody class=".getData-list">标签中输出拼接好的html结构。
                        $(".getData-list").html(htmlstr);

                        // 渲染分页
                        laypage({
                            cont: 'laypage',    //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：&lt;div id="laypage">&lt;/div>
                            pages: Math.ceil(respData.pagination.total / respData.pagination.pageSize),  // 除法运算，向上取整
                            curr: currPage,    //初始化当前页
                            hash: 'page',
                            limits: [10, 25, 50, 100],
                            first: '首页',
                            last: '尾页',
                            prev: '<em>&lt;&lt;</em>',
                            next: '<em>&gt;&gt;</em>',
                            jump: function (e, first) { //触发分页后的回调
                                console.log(e);
                                if (!first) {
                                    $(".getData-list").attr("data-currPage", e.curr);
                                    runGetDataList();
                                }
                            }
                        });
                    } else {
                        console.log(respData.msg); // 返回正确状态，但是没有数据，在此处处理。
                        var tdNum = $("#data-table-list thead tr td").length;
                        htmlstr = '<tr><td colspan="' + tdNum + '" class="data-null">数据为空</td></tr>';
                        $(".getData-list").html(htmlstr);
                    }
                } else {
                    console.log(respData.msg);  // 返回错误状态，通常指网络请求失败、后台报错等，最好后台给出错误提示，方便前台调试。也可定义几种返回的错误状态码，如201 203 400 404 500 503等。
                }
            },
            error: function (respData) { // ajax的error状态
                console.log(respData);
            }
        });
    }

    // 运行获取数据列表这个方法，这里面可以灵活自定义要传递的参数
    function runGetDataList() {
        getDataList({
            classifyID: $("#classifyID").val() || 0, // 分类id
            currPage: $(".getData-list").attr("data-currPage") || 1, // 当前第几页
            pageSize: 10, // 每页几条
            datetimeStart: $("#search-datetime-start").val() || '',
            datatimeEnd: $("#search-datetime-end").val() || '',
            keywords: $("#search-input").val() || '',
        });
    }

    $(function () {
        runDatetimePicker(); // 实例化日期控件
        getUrlParameter(); // 获取URL参数，初始化条件

        $('.table-sort').dataTable({
            "aaSorting": [
                [1, "desc"]
            ],//默认第几个排序
            "bStateSave": true,//状态保存
            "pading": false,
            "pagingType": "full_numbers",
            "aoColumnDefs": [
                //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                {"orderable": false, "aTargets": [0, 8]}// 不参与排序的列
            ]
        });

        // runGetDataList(); // 页面载入，自执行加载数据...
        // 点击搜索执行...
        $("#search-submit").on("click", function () {
            // runGetDataList();
        });


    });
</script>
</body>
</html>
